<template>
    <div class="wrapper">
    <swiper :options="swiperOption" >
        <!-- slides -->
        <swiper-slide v-for="list in swiperList" :key="list.id"><img class="swiper-img" :src="list.imgUrl" alt=""></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    </div>
</template>

<script>
    export default {
        name: "Swipername",
        data() {
            return {
                swiperOption: {
                        pagination:'.swiper-pagination',
                        loop:true
                },
                swiperList:[{
                    id:'0001',
                    imgUrl:'http://img1.qunarzz.com/piao/fusion/1806/3c/c72a1ccd4d7b2202.jpg_750x200_b88bbab4.jpg'
                },
                    {
                        id:'0002',
                        imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/e7/d70d0830a9941b02.jpg_750x200_f8c7d2ad.jpg'
                    }
                ]
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
    }
</script>

<style scoped lang="stylus">
.wrapper>>>.swiper-pagination-bullet-active
    background #fff
.wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 24%
    background #eee
    .swiper-img
        width 100%

</style>